<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type" multiple></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" multiple></select-app-source>
                </el-form-item>
                <el-form-item label="优化师" prop="spreadUser">
                    <select-spread-user v-model="search.spreadUser" multiple></select-spread-user>
                </el-form-item>
                <el-form-item title="日期" prop="day">
                    <picker-date-range v-model="search.day" :clearable="false"></picker-date-range>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :max-height="maxHeight">
            <vxe-table-column title="日期" field="day" min-width="120" fixed="left"/>
            <vxe-table-column title="注册人数" field="registerUser" min-width="100" fixed="left"/>
            <vxe-table-column title="付费人数" field="payUser" min-width="100" fixed="left"/>
            <vxe-table-column :title="idx+1+'日'" :field="`${field}[${idx}]`" formatter="formatPercent" min-width="80" v-for="(idx, day) in days" :key="'keepScale'+day+Math.random()" v-if="idx > 0"/>
        </vxe-table>
    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';
import SelectSpreadUser from '~/components/Select/spread-user';

export default {
    components: {
        SelectAppSourceType,
        SelectSpreadUser,
    },
    props: {
        field: {
            type: String,
            default: 'payScale'
        }
    },
    data() {
        return {
            search: {
                source: '',
                spreadUser: '',
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
            // footer: {},
            days: {},
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 250;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
                field: this.field,
            });
            this.$store.dispatch('spreadData/UserPayKeep', filter).then(({data}) => {
                this.days = data.days;
                // this.tableData = data.data;// 供图表用
                this.$refs.xTable.reloadData(data.data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().add(-1, 'M').startOf('d').unix(),
                moment().add(-1, 'd').endOf('d').unix(),
            ];
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-付费留存',
                type: 'xlsx'
            })
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

